<template>
  <view class="myTeam">
    <scroll-view
      scroll-y="true"
      class="scrollView"
      :style="{ height: mainHeight }"
    >
      <view
        v-for="(item, index) in mineGroupList"
        :key="index"
        class="OtherTeami"
      >
        <view class="OtherTeam">
          <view class="image">
            <image :src="item.avatar"></image>
          </view>
          <view class="teamIntro">
            <view class="nameAmedal">
              <view class="team_name">{{ item.nickName }}</view>
              <view class="medal">
                <image
                  v-if="item.vipLevel == 1"
                  style="width: 86rpx; height: 47rpx; margin-right: 8rpx"
                  src="/static/images/my/vip.png"
                ></image>
                <image
                  v-if="item.vipLevel == 2"
                  style="width: 86rpx; height: 47rpx; margin-right: 8rpx"
                  src="/static/images/my/svip.png"
                ></image>
                <image
                  v-if="item.agencyLevel == 3"
                  style="width: 113rpx; height: 33rpx; margin-right: 8rpx"
                  src="/static/images/my/gxdz.png"
                ></image>
                <image
                  v-if="item.agencyLevel == 4"
                  style="width: 78rpx; height: 33rpx; margin-right: 8rpx"
                  src="/static/images/my/lc.png"
                ></image>
                <image
                  v-if="item.agencyLevel == 5"
                  style="width: 147rpx; height: 33rpx; margin-right: 8rpx"
                  src="/static/images/my/yyzx.png"
                ></image>
                <image
                  v-if="item.agencyLevel == 6"
                  style="width: 78rpx; height: 33rpx"
                  src="/static/images/my/zc.png"
                ></image>
              </view>
            </view>
            <view class="ID">ID: {{ item.userId }}</view>
            <view class="phoneTime"
              >{{
					item.phonenumber?
                  `${item.phonenumber.slice(0, 3)}****${item.phonenumber.slice(
                    7
                  )}`:''
                }}
              &nbsp;&nbsp;&nbsp;{{ item.createTime }}加入</view
            >
          </view>
        </view>
        <view class="divider">TA的团队</view>
        <view class="teamInfo">
          <view class="teamInfoi">
            <view class="teamInfoi_num">{{ item.teamOrderNumber || 0 }}</view>
            <view class="teamInfoi_Label">订单数</view>
          </view>
          <view class="teamInfoi">
            <view class="teamInfoi_num">{{ item.teamPerformance || 0 }}</view>
            <view class="teamInfoi_Label">业绩</view>
          </view>
          <view class="teamInfoi">
            <view class="teamInfoi_num">{{ item.teamCount || 0 }}</view>
            <view class="teamInfoi_Label">收入</view>
          </view>
          <!-- <view class="teamInfoi">
            <view class="teamInfoi_num">338</view>
            <view class="teamInfoi_Label">人数</view>
          </view> -->
        </view>
      </view>
      <Empty v-if="mineGroupList.length == 0" />
    </scroll-view>
  </view>
</template>

<script>
import mineApi from "@/api/mine";
export default {
  data() {
    return {
      mineGroupList: [],
    };
  },
  async onLoad() {
    this.getMineGroup();
  },
  methods: {
    getMineGroup() {
      mineApi.getMineGroupNew().then((res) => {
        if (res.code == 200) {
          this.mineGroupList = res.rows;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.myTeam {
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
}

.scrollView {
  width: 100%;
  padding: 0 12px;

  .OtherTeami {
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
    padding: 10px 0 10px 15px;
    margin: 15px 0;

    .OtherTeam {
      width: 100%;
      height: 120rpx;
      display: flex;
      align-items: center;

      .image {
        display: flex;
        justify-content: center;
        align-items: center;

        image {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
        }
      }

      .teamIntro {
        width: calc(100% - 70px);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 5px;

        .nameAmedal {
          display: flex;

          .team_name {
            color: #000;
            font-weight: 600;
            font-size: 32rpx;
          }

          .medal {
            flex: 1;
            height: 40rpx;
            display: flex;
            align-items: center;
            margin-left: 2px;
          }
        }

        .ID {
          color: #838383;
        }

        .phoneTime {
          color: #ff5b6b;
        }
      }
    }

    .divider {
      color: #000;
      font-weight: 600;
      width: 100%;
      height: 30px;
      line-height: 30px;
    }

    .teamInfo {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .teamInfoi {
        width: 25%;

        .teamInfoi_num {
          color: #000;
          font-weight: 600;
          font-size: 30rpx;
        }

        .teamInfoi_Label {
          color: #838383;
        }
      }
    }
  }
}
</style>
